<template>
  <v-layout class="rounded rounded-md">
    <v-navigation-drawer>
      <v-list>
        <v-list-item
          title="Navigation drawer"
        ></v-list-item>
      </v-list>
    </v-navigation-drawer>

    <v-app-bar title="Application bar">
      <v-btn @click="toggleTheme"> {{ themeIcon }}</v-btn>
    </v-app-bar>

    <v-main class="align-center justify-center">
      <AppContent />
    </v-main>
  </v-layout>
</template>

<script setup>
import AppContent from "./AppContent.vue";
import { useTheme } from "vuetify";
import { ref } from "vue";

const theme = useTheme();
const themeIcon = ref(
  theme.global.name.value !== "dark" ? "🔆" : "🌙"
);

function toggleTheme() {
  theme.global.name.value = theme.global.current.value.dark
    ? "light"
    : "dark";

  themeIcon.value =
    theme.global.name.value !== "dark" ? "🔆" : "🌙";
}
</script>
